<script>
import { defineComponent, onMounted, ref } from 'vue'

import { Input } from 'ant-design-vue'

import goodsList from './goodsList.vue'

export default defineComponent({
  components: {
    Input,
    GoodsList: goodsList,
  },
  props: {
    params: Object,
  },
  setup(props) {
    const purchaseBomRef = ref(null)
    const value = ref(props.params?.value ?? '')
    const isClearEvent = ref(false)

    const getValue = () => value.value

    const onClear = (e) => {
      props.params.data.goodsId = 0
      isClearEvent.value = true
    }

    const onClick = () => {
      // 调用子组件暴露的openModal方法
      purchaseBomRef.value?.openModal()
    }

    const ModelClose = (row) => {
      value.value = `${row.goods_no}/${row.template.template_no}`
      props.params.data.color = row.color?.name
      props.params.data.goodsId = row.goods_id
      props.params.api.stopEditing()
    }
    return {
      purchaseBomRef,
      value,
      isClearEvent,
      getValue,
      onClear,
      onClick,
      ModelClose,
    }
  },
})
</script>

<template>
  <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
    <Input v-model:value="value" style="width: 100%; height: 100%" placeholder="请选择物料" allow-clear @click="onClick" @clear="onClear" />
    <GoodsList ref="purchaseBomRef" @push-data="ModelClose" :openType="2"  />
  </div>
</template>

<style scoped>
input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
